<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>地图</title>
        <link href="../css/menu.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
		<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8ebacf37a4d23fdd8c6c88451bb1825e"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/library/RectangleZoom/1.2/src/RectangleZoom_min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
    </head>
    <body style="background-color:#402D42;">
   
       
		<div id="mainmap" style="width:1170px;height:550px;border: 0px;float:right;"  >
		</div>
		 <div style="width:130px;float:right;">

        

            <ul id="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Menu 1</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 1</a></li>
                        <li><a href="#">Submenu 2</a></li>
                        <li><a href="#">Submenu 3</a></li>
                        <li><a href="#">Submenu 4</a></li>
                        <li><a href="#">Submenu 5</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu 2</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 2-1</a></li>
                        <li><a href="#">Submenu 2-2</a></li>
                        <li><a href="#">Submenu 2-3</a></li>
                        <li><a href="#">Submenu 2-4</a></li>
                        <li><a href="#">Submenu 2-5</a></li>
                        <li><a href="#">Submenu 2-6</a></li>
                        <li><a href="#">Submenu 2-7</a></li>
                        <li><a href="#">Submenu 2-8</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu 3</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 3-1</a></li>
                        <li><a href="#">Submenu 3-2</a></li>
                        <li><a href="#">Submenu 3-3</a></li>
                        <li><a href="#">Submenu 3-4</a></li>
                        <li><a href="#">Submenu 3-5</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu 4</a></li>
                <li><a href="#">Menu 5</a></li>
                <li><a href="#">Menu 6</a></li>
                <li><a href="#">Back</a></li>
            </ul>

        </div>
		<script type="text/javascript">		
		var isEnlarge=0;
		maplet = new BMap.Map("mainmap");            // 创建Map实例
		//var point = new BMap.Point(116.39885,39.96571);    // 创建点坐标
		maplet.centerAndZoom('广州',12);                     // 初始化地图,设置中心点坐标和地图级别。
		maplet.enableScrollWheelZoom(true);
		maplet.addControl(new BMap.MapTypeControl());
		var menu = new BMap.ContextMenu();
		var txtMenuItem = [
			{
				text:'放大',
				callback:function(){maplet.zoomIn()}
			},
			{
				text:'缩小',
				callback:function(){maplet.zoomOut()}
			},
			{
				text:'新增计划',
				callback:function(){alert('建设中...');}
			},
			{
				text:'新增日记',
				callback:function(){alert('建设中...');}
			}
		];
		for(var i=0; i < txtMenuItem.length; i++){
			menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
		}
		maplet.addContextMenu(menu);
		</script> 
		</body>
	</html>